{% load staticfiles %}
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>注册</title>

    <!-- Bootstrap core CSS -->
    <link rel="icon" href="{% static 'favicon.ico' %}">
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'fontawesome/css/font-awesome.min.css' %}">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <!--    头部开始            -->
                <div class="page-header">
                    <h1>用户注册 <small>--注册页面</small></h1>
                </div>  <!-- /page-header -->
                <!--    头部结束            -->
                <form novalidate action="/registe/" method="post" enctype="multipart/form-data" class="form-horizontal">
                    {% csrf_token %}

                    <!--       用户名             -->
                    <div class="form-group">
                        <label for="{{form_obj.username.id_for_label}}" class="col-sm-2 control-label">{{form_obj.username.label}}</label>
                        <div class="col-sm-8">{{form_obj.username}}<span class="help-block">{{form_obj.name.errors.0}}</span></div>
                    </div>

                    <!--       密码             -->
                    <div class="form-group">
                        <label for="{{form_obj.password.id_for_label}}" class="col-sm-2 control-label">{{form_obj.password.label}}</label>
                        <div class="col-sm-8">{{form_obj.password}}<span class="help-block">{{form_obj.password.errors.0}}</span></div>
                    </div>

                    <!--       确认密码             -->
                    <div class="form-group">
                        <label for="{{form_obj.repassword.id_for_label}}" class="col-sm-2 control-label">{{form_obj.repassword.label}}</label>
                        <div class="col-sm-8">{{form_obj.repassword}}<span class="help-block">{{form_obj.repassword.errors.0}}</span></div>
                    </div>

                    <!--       昵称             -->
                    <div class="form-group">
                        <label for="{{form_obj.nickname.id_for_label}}" class="col-sm-2 control-label">{{form_obj.nickname.label}}</label>
                        <div class="col-sm-8">{{form_obj.nickname}}<span class="help-block">{{form_obj.nickname.errors.0}}</span></div>
                    </div>

                    <!--       邮箱            -->
                    <div class="form-group">
                        <label for="{{form_obj.email.id_for_label}}" class="col-sm-2 control-label">{{form_obj.email.label}}</label>
                        <div class="col-sm-8">{{form_obj.email}}<span class="help-block">{{form_obj.email.errors.0}}</span></div>
                    </div>

                    <!--       电话            -->
                    <div class="form-group">
                        <label for="{{form_obj.telephone.id_for_label}}" class="col-sm-2 control-label">{{form_obj.telephone.label}}</label>
                        <div class="col-sm-8">{{form_obj.telephone}}<span class="help-block">{{form_obj.telephone.errors.0}}</span></div>
                    </div>

                    <!--       头像            -->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">{{form_obj.head_img.label}}</label>
                        <div class="col-sm-8">
                            <label for="{{form_obj.head_img.id_for_label}}" class="col-sm-2 control-label">
                                <img src="/static/blog/image/headimg.jpg"  id='head-im' style="height:100px; width:100px">
                            </label>
                            {{form_obj.head_img}}
                            <span class="help-block"></span></div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="submit" class="btn btn-success" value="用户注册">
                            <a href="/" class="btn btn-success">返回首页</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div> <!-- /container -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{% static 'jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script>
        $('#id_head_img').change(function(){
            var filerd = new FileReader();
            filerd.readAsDataURL(this.files[0]);
            filerd.onload = function(){
                $("#head_img").attr('src', filerd.result);
            };
        });
    </script>
</body>
</html>
